import { useEffect, useState } from 'react';
import '../../assets/scss/fee/fee.scss'
import { Button, Form, Input, Table, Space, Pagination, message, Popconfirm, Tabs } from 'antd';
import { feeList, feeDelete, feeDeleteAll } from '../../apis/liveFee/index'
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from "react-router-dom";


const Fee = (): JSX.Element => {
  const navigate = useNavigate()
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [counts, setCounts] = useState(0);
  const [list, setList] = useState([]);
  const [listData, setListData] = useState({
    page: 1,//页
    psize: 10,//条
    key: '',
    buildingid: 0,
    name: '',
    houseno: '',
    mibile: '',
    begindate: '',
    enddate: '',
    state: 2,
    type: '',
    admin: '',
    orderno: '',
  });

  const [form] = Form.useForm();
  // 查询
  const onFinish = (values: any) => {
    console.log(values);
    const { admin, buildingid, enddate, houseno, mibile, name, orderno } = values
    setListData({ ...listData, admin, buildingid, enddate, houseno, mibile, name, orderno })
  };
  // 重置
  const onReset = () => {
    form.resetFields();
  };

  // 切换
  const onToggle: any = [{
    label: "已缴费",
    key: 2,
    // children: `Content of card tab `,
  }, {
    label: "未缴费",
    key: 1,
    // children: `Content of card tab `,
  }]
  const changeToggle = (state: any) => {
    // console.log(state);
    setListData({ ...listData, state })
    console.log('12345');
    // setListData({page: 1,//页
    // psize: 10,//条
    // key: '',
    // buildingid: 0,
    // name: '',
    // houseno: '',
    // mibile: '',
    // begindate: '',
    // enddate: '',
    // state: 2,
    // type: '',
    // admin: '',
    // orderno: '',})
    // form.setFieldsValue({ name: '', buildingid: '', houseno: '', mibile: '', enddate: '', admin: '', orderno: '' });
  }

  // 表格
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    id: number;
    tags: string[];
  }
  const data: DataType[] = list;
  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '楼栋名',
      dataIndex: 'building',
      key: 'building',
    }, {
      title: '房号',
      dataIndex: 'houseno',
      key: 'houseno',
    }, {
      title: '联系方式',
      dataIndex: 'mobile',
      key: 'mobile',
    }, {
      title: '缴费类型',
      dataIndex: 'type',
      key: 'type',
    }, {
      title: '账期',
      dataIndex: 'address',
      key: 'address',
    }, {
      title: '应缴金额(元)',
      dataIndex: 'price',
      key: 'price',
    }, {
      title: '导入时间',
      dataIndex: 'addtime',
      key: 'addtime',
    }, {
      title: '添加者',
      dataIndex: 'admin',
      key: 'admin',
    }, {
      title: '状态',
      dataIndex: 'stateName',
      key: 'stateName',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary">详情</Button>
          <Button type="primary" onClick={goAdd(record.id)}>修改</Button>
          <Popconfirm
            placement="topRight"
            title="确认删除?"
            onConfirm={confirm(record.id)}
            onCancel={cancel}
            okText="是"
            cancelText="否"
          >
            <Button type="primary" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  // 表格复选
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('sele', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = { selectedRowKeys, onChange: onSelectChange, };

  // 删除确认框
  const confirm = (id: any) => {
    return () => {
      // console.log(id);
      del(id);
    }
  };

  const cancel = () => {
    // console.log(e);
    message.error('已取消');
  };
  // 批删确认框
  const delAllConfirm = () => {
    // return () => {
    console.log(selectedRowKeys);
    delAll();
    // }
  };

  // 删除
  const del = async (id: number) => {
    const res: any = await feeDelete({ id })
    // console.log(res);
    if (res && res.errCode === 10000) {
      getfeeList()
      message.open({
        type: 'success',
        content: '删除成功',
      });
    } else {
      message.open({
        type: 'error',
        content: '删除出错',
      });
    }
  }
  // 批量删除
  const delAll = async () => {
    const res: any = await feeDeleteAll({ ids: selectedRowKeys })
    // console.log(res);
    if (res && res.errCode === 10000) {
      getfeeList()
      message.open({
        type: 'success',
        content: '删除成功',
      });
    } else {
      message.open({
        type: 'error',
        content: '删除出错',
      });
    }
  }

  // 分页
  const onPagination = (page: number, psize: number) => {
    // console.log(page, psize);
    setListData({ ...listData, psize, page });
  }

  // 列表接口
  const getfeeList = async () => {
    const res: any = await feeList(listData);
    // console.log(res);
    if (res && res.errCode === 10000) {
      setList(res.data.list)
      setCounts(res.data.counts)
    } else {
      message.open({
        type: 'error',
        content: '列表数据获取出错',
      });
    }
  }
  // 添加
  const goAdd = (id: number) => {
    return () => {
      navigate('/home/feeadd', { state: { id } })
    }
  }

  useEffect(() => {
    getfeeList()
  }, [listData])

  return (
    <div className='fee'>
      <div className='hd'>
        <div className='title'>缴费列表</div>
      </div>
      <div className='top'>
        <Tabs
          defaultActiveKey="1"
          type="card"
          size='large'
          items={onToggle}
          onChange={changeToggle}
        />
        <div>
          <Form
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            className='form'
          // size='large'
          >
            <Form.Item name="name" label="姓名" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item name="buildingid" label="园区名称" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item name="houseno" label="房号" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item name="mibile" label="联系方式" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item name="enddate" label="账期" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item name="admin" label="添加人" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item name="orderno" label="流水单号" rules={[{ required: false }]}>
              <Input />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button htmlType="button" onClick={onReset} className='onReset'>
                重置
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
      <div className='btn'>
        <Button type="primary" onClick={goAdd(0)}>添加</Button>
        <Popconfirm
          placement="topRight"
          title="确认全部删除?"
          onConfirm={delAllConfirm}
          onCancel={cancel}
          okText="是"
          cancelText="否"
        >
          <Button type="primary" danger>批量删除</Button>
        </Popconfirm>

      </div>
      <div className='tab'>
        <Table rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }} rowKey={(record: any) => record.id} columns={columns} dataSource={data} pagination={false} />
        <div className='paging'>
          <Pagination
            total={counts}
            showTotal={(total) => `共 ${total} 条`}
            pageSizeOptions={[10, 20, 30, 50]}
            defaultPageSize={10}
            // defaultCurrent={1}
            current={listData.page}
            showSizeChanger={true}
            onChange={onPagination}
          />
        </div>
      </div>
    </div>
  )
}
export default Fee;